import React, { Component } from 'react'
import { SearchDetailList } from './searchPage.style'
import General from './resultList/general'
import Board from './resultList/board'
import Post from './resultList/post'
import { Route, Redirect, Switch, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import Header from '../../components/headerBar/header'


@connect(
    state => {
        return ({
            keywords: state.getIn(['search', 'key'])
        })
    },
    null
)
@withRouter
class searchListDetail extends Component {
    state = {
        routePath: 1,

    }
    componentDidMount() {
        if (this.props.keywords) {
            this.url = `/result/general?keywords=${this.props.keywords}`
        } else {
            this.url = `/result/general?keywords=${localStorage.getItem('keywords')}`
        }
        this.props.history.push(this.url)
    }
    changeNavHandler(routePath) {
        this.setState({
            routePath: routePath
        })
        this.key = localStorage.getItem('keywords')
        switch (routePath) {
            case 1:
                if (this.props.keywords) {
                    this.url = `/result/general?keywords=${this.props.keywords}`
                } else {
                    this.url = `/result/general?keywords=${this.key}`
                }
                this.props.history.push(this.url)
                break;
            case 2:
                this.props.history.push(`/result/post?keywords=${this.key}`)
                break;
            case 3:
                this.props.history.push(`/result/board?keywords=${this.key}`)
                break;
            default:
                break
        }
    }
    backToHome=()=>{
        // this.props.history.push('/index')
        this.props.history.go(-2)
    }
    render() {
        return (
            <div style={
                {
                    background: '#fff',
                    height:'100%'
                }
            }>
                <Header title={`关键词：${localStorage.getItem('keywords')}`}>
                    <i
                    onClick={this.backToHome}
                    style={{
                        fontSize: '0.25rem'
                    }} className="yo-ico">&#xe743;</i>
                </Header>
                <SearchDetailList>
                    <ul className="navUl">
                        <li onClick={() => this.changeNavHandler(1)}><span className={this.state.routePath === 1 ? 'active' : ''}>综合</span></li>
                        <li onClick={() => this.changeNavHandler(2)}><span className={this.state.routePath === 2 ? 'active' : ''}>帖子</span></li>
                        <li onClick={() => this.changeNavHandler((3))}><span className={this.state.routePath === 3 ? 'active' : ''}>板块</span></li>
                    </ul>
                </SearchDetailList>

                <Switch>
                    <Route path="/result/general" component={General}></Route>
                    <Route path="/result/post" component={Post}></Route>
                    <Route path="/result/board" component={Board}></Route>
                </Switch>



            </div>
        )
    }

}
export default searchListDetail
